<template>
  <el-upload
    :disabled="disabled"
    :action="uploadUrl"
    :show-file-list="false"
    :file-list="fileList"
    :before-upload="beforeUpload"
    :on-success="importSuccess"
    :on-error="importError"
    :on-progres="importProgress"
    class="upload-demo"
    with-credentials
  >
    <el-button :disabled="disabled" :size="buttonSize" type="primary" icon="el-icon-upload">
      Excel导入
    </el-button>
  </el-upload>
</template>
<script>
export default {
  name: 'Name',
  props: {
    // 有效
    disabled: {
      type: Boolean,
      default: false
    },
    // 按钮的尺寸
    buttonSize: {
      type: String,
      default: 'mini'
    },
    // 上传地址
    uploadUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    // 导入相关
    beforeUpload (file) {
      // console.log(file)
      this.fileLoading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    importSuccess (response, file, fileList) {
      console.log(response)
      if (response.code === '0000') {
        this.$message({
          message: response.message,
          type: 'success'
        })
        this.$emit('success', response)
      } else {
        this.$message({
          message: response.message,
          type: 'danger'
        })
        this.$emit('error', response)
      }
      this.fileLoading.close()
    },
    importError (err) {
      console.log(err)
    },
    importProgress (event, file, fileList) {
      console.log(event)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.upload-demo {
  display: inline;
  margin-left: 5px;
}
</style>
